<template>
  <div class="jmact">

    <audio ref="jmAudio" v-if="data.musicUrl" style="display:none;" :src="data.musicUrl" controls="controls"
      autoplay="autoplay" loop="loop"></audio>
    <barrage-area :list="groupList" v-if="data && groupList.length" />
    <div class="jmact-swiper" v-if="data.slideshowPic && data.slideshowPic.length">

      <van-swipe :autoplay="5000" indicator-color="white" lazy-render>
        <van-swipe-item v-for="item in data.slideshowPic" :key="item">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--活动信息-->
    <div class="jmact-actinfo">
      <span>浏览：{{data.views}}</span>
      <span>报名：{{data.applications}}</span>
      <span>成团：{{data.groupons}}</span>
      <span>分享：{{data.shares}}</span>
    </div>
    <!--活动时间-->
    <div class="jmact-acttime">
      <div class="box" v-if="data.state === 1">
        <span class="colon">距离活动结束：</span>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.days }}</span>
            <span class="colon">天</span>
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">时</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">分</span>
            <span class="block">{{ timeData.seconds }}</span>
            <span class="colon">秒</span>
          </template>
        </van-count-down>
      </div>
      <div class="box" v-if="data.state === 0">
        <span class="colon">距离活动开始：</span>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.days }}</span>
            <span class="colon">天</span>
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">时</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">分</span>
            <span class="block">{{ timeData.seconds }}</span>
            <span class="colon">秒</span>
          </template>
        </van-count-down>
      </div>
    </div>
    <!--团列表-->
    <div class="jmact-grouplist">
      <div class="title">
        <van-tabs v-model:active="tabIndex" background="#fafafa" color="#f44336" style="width: 100%">
          <van-tab>
            <template #title>
              <van-icon name="fire-o" />正在进行中的团 </template>
          </van-tab>
          <van-tab>
            <template #title>
              <van-icon name="user-o" />我已经参与的团</template>
          </van-tab>
        </van-tabs>
      </div>
      <div class="item" v-for="(item,index) in groupList" :key="index">
        <van-image width="50" height="50" round :src="item.image || 'https://img.yzcdn.cn/vant/cat.jpeg'" fit="cover" />
        <div class="tag">团长</div>
        <div class="desc">
          <div class="desc_top" v-html="item.userName"></div>
          <!-- <div class="desc_center">团号:{{item.grouponCode}}</div> -->
          <div class="avatarlist">
            <div class="avatar" v-for="(item2,index2) in item.grouponSubImages" :key="index2">
              <van-image :src="item2" round width="20px" height="20px" />
            </div>
          </div>
          <div class="desc_bottom" v-if="item.gap > 0">已参团{{item.total}}人,差{{item.gap }}人进阶成{{item.limited}}人团</div>
          <div class="desc_bottom" v-else>恭喜已成功组成{{item.limited}}人团！</div>
        </div>
        <div v-if="item.gap > 0">
          <van-button v-if="data.state === 1" size="small" color="#ffb731" type="primary" @click="openGroupShare(item)">
            {{tabIndex?'去邀请':'去参团'}}
          </van-button>
        </div>
        <div v-else class="desc_done"></div>
        <div>
        </div>
      </div>
      <div class="empty" v-if="!groupList.length"><img
          src="https://img01.yzcdn.cn/vant/custom-empty-image.png" />活动火热筹备中！
      </div>
      <div v-if="totalLimit>0" style="margin-top:12px;">
        <van-pagination mode="simple" v-model="currentPage" :total-items="totalLimit" :items-per-page="pageLimit"
          @change="handelGetGroupData" />
      </div>
    </div>
    <!--活动规则-->
    <div class="jmact-cbox" v-if="data.gameRule && data.gameRule != ''">
      <div class="title">活动规则</div>
      <div class="content" v-html="data.gameRule || ''"></div>
    </div>
    <!-- 活动介绍and图片 -->
    <div class="jmact-cbox"
      v-if="data.acIntroduce && (data.acIntroduce.text != '' || data.acIntroduce.pics.length > 0)">
      <div class="title">活动介绍</div>
      <div class="content" v-if="data.acIntroduce.text" v-html="data.acIntroduce.text || ''"></div>
      <div class="thumb" v-if="data.acIntroduce.pics && data.acIntroduce.pics.length">
        <img v-for="(item,index) in data.acIntroduce.pics" :key="index" :src="item">
      </div>
    </div>
    <!-- 机构介绍文本and图片 -->
    <div class="jmact-cbox"
      v-if="data.orgIntroduce && (data.orgIntroduce.text != '' || data.orgIntroduce.pics.length > 0)">
      <div class="title">活动机构</div>
      <div class="content" v-if="data.orgIntroduce.text" v-html="data.orgIntroduce.text || ''"></div>
      <div class="thumb" v-if="data.orgIntroduce.pics && data.orgIntroduce.pics.length">
        <img v-for="(item,index) in data.orgIntroduce.pics" :key="index" :src="item">
      </div>
    </div>


    <!-- 奖品介绍文本and图片 -->
    <div class="jmact-cbox"
      v-if="data.goodsIntroduce && (data.goodsIntroduce.text != '' || data.goodsIntroduce.pics.length > 0)">
      <div class="title">奖品说明</div>
      <div class="content" v-if="data.goodsIntroduce.text" v-html="data.goodsIntroduce.text || ''"></div>
      <div class="thumb" v-if="data.goodsIntroduce.pics && data.goodsIntroduce.pics.length">
        <img v-for="(item,index) in data.goodsIntroduce.pics" :key="index" :src="item">
      </div>
    </div>

    <!-- <div class="jmact-content" v-html="data.content||''"></div> -->
    <div class="jmact-footer">
      <van-action-bar style="background:transparent;">
        <van-action-bar-button v-if="data.state === 1" type="danger" color="#ff6034" text="立即开团"
          @click="openForm('')" />
        <van-action-bar-button v-if="data.state === 0" type="danger" color="#ff6034" text="活动未开始" disabled />
        <van-action-bar-button v-if="data.state === 2 || data.state === 3" type="danger" color="#ff6034" text="活动已下线"
          disabled />
        <van-action-bar-button v-if="grouponCode && curGroupInfo" type="warning" color="#F44336"
          :text="curGroupInfo.gap==0?'已成团': (curGroupInfo.isJoined?'已参与':'参加此团')"
          @click="openForm2(curGroupInfo, curGroupInfo.gap==0 || curGroupInfo.isJoined)" />
        <div class="curgroup" v-if="grouponCode && curGroupInfo">
          <div class="jiao"></div>
          <div class="avatar">
            我是团长:
            <div class="chief" v-html="curGroupInfo.userName"></div>
            <van-image width="30px" height="30px" round :src="curGroupInfo.image">
            </van-image>
            <template v-if="curGroupInfo.gap==0">
              <span v-if="curGroupInfo.isJoined">您已经参加该团了，恭喜成功组成{{curGroupInfo.limited}}人团~</span>
              <span v-else>该团已经拼成，快去发起自己的拼团~</span>
            </template>
            <template v-else>
              <span v-if="curGroupInfo.isJoined">您已经参加该团了，还差{{curGroupInfo.gap}}人成团，快去邀请好友拼团~</span>
              <span v-else>该团还差{{curGroupInfo.gap}}人成团，快来加入我的团享受福利~</span>
            </template>
          </div>
        </div>
      </van-action-bar>
    </div>
    <div class="jmact-topside">
      <div class="jmact-topside__item jmact-topside__iteming"><img :class="{'ing': playIng}" src="@/assets/music.png"
          @click="controlMusic" /></div>
      <div class="jmact-topside__item" @click="openRule">活动<br />玩法</div>
      <div class="jmact-topside__item" @click="openContact">联系<br />机构</div>
    </div>
    <div class="jmact-botside" @click="openShare">
      <van-icon name="share-o" />
      <p>分享好友</p>
    </div>
    <canvas v-show="false" ref="picture"></canvas>
    <van-popup v-model:show="showShare">
      <div class="sharebox">
        <van-image width="270" :src="shareImg" fit="cover"></van-image>
        <p>长按保存图片(分享与转发给朋友)或者右上角点分享</p>
      </div>
    </van-popup>
    <!-- <van-overlay :show="showShare" z-index="30"></van-overlay> -->
    <van-overlay :show="showForm" @click.stop="closeForm" z-index="10">
      <div class="jmact-form" @click.stop="">
        <van-form @submit="onSubmit" :label-width="65">
          <div class="jmact-form__tit">学员信息</div>
          <van-field v-model="form.contactName" name="学员名字" maxlength="8" label="学员名字" placeholder="请输入学员名字" />
          <van-field v-model.number="form.userAge" @click="ageSheet = true" readonly type="digit" maxlength="3"
            name="学员年龄" label="学员年龄" placeholder="请输入学员年龄" />
          <van-field v-model="form.contactPhone" type="tel" maxlength="11" name="学员电话" label="学员电话"
            placeholder="请输入学员电话" />
          <div class="jmact-form__tit">类型</div>
          <van-field name="radio" label="">
            <template #input>
              <!-- disabled -->
              <van-radio-group v-model.number="form.userType" direction="horizontal">
                <van-radio checked-color="#ffb731" :name="2">新学员</van-radio>
                <van-radio checked-color="#ffb731" :name="1">老学员</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="jmact-form__tit">科目</div>
          <van-field name="checkboxGroup" lable="">
            <!-- :disabled="selectDisabled" -->
            <template #input>
              <van-radio-group v-model="form.subject" direction="horizontal">
                <van-radio checked-color="#ffb731" v-for="(item,index) in data.rulesList" :key="index"
                  :name="item.subject" @click="calcPrice(item)">
                  {{item.subject}}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="jmact-form__tips">
            请填写真实信息，报名成功后无法修改，请谨慎填写（若填写信息有误将造成无法成功兑换）
          </div>
          <div class="jmact-form__paybtn">
            <div class="jmact-form__pay"><img src="@/assets/wechat.png" /><span>￥</span>{{selectSubject.onsale}}</div>
            <van-button style="width: 60%;" block color="#ffb731" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </van-overlay>
    <van-action-sheet v-model:show="ageSheet">
      <van-picker title="选择学员年龄" :columns="ageList" :default-index="form.userAge-1" @confirm="selectAge"
        @cancel="ageSheet = false"></van-picker>
    </van-action-sheet>
    <!-- <van-icon name="share-o" /> -->
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    reactive,
    toRefs,
    ref,
    onMounted,
    watch
  } from 'vue';
  import {
    Dialog,
    Toast
  } from 'vant';
  import {
    getActData,
    createActivityQCode,
    addStatistics,
    getGroupList,
    loginAndRegister,
    orderSubmit,
    createWXPay,
    wxAuthUrl
  } from '@/api'
  import {
    useRoute,
  } from 'vue-router'
  import dayjs from 'dayjs'
  import cookie from 'js-cookie'
  import {
    wxPay,
    initWxPay
  } from '@/utils/wxpay'
  import {
    initShare,
    setShare
  } from '@/utils/wxsdk'
  interface formData {
    activityId ? : number | string,
      userAge: number | string,
      contactName: string,
      contactPhone: any,
      userType: string | number,
      subject: string,
      subjectId: string | number,
      message ? : string
  }
  import barrageArea from '../components/barrageArea.vue'
  // initWxPay() // 初始化微信支付
  initShare() // 初始化微信分享
  /*
  function funcUrlDel(name) {
    var loca = window.location
    var baseUrl = loca.origin + loca.pathname + '?'
    var query = loca.search.substr(1);
    if (query.indexOf(name) > -1) {
      var obj = {}
      var arr: any = query.split('&')
      for (var i = 0; i < arr.length; i++) {
        arr[i] = arr[i].split("=")
        obj[arr[i][0]] = arr[i][1]
      };
      delete obj[name]
      var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g, '').replace(/\:/g, '=').replace(/\,/g,
        '&')
      return url
    }
  }
  */
  export default defineComponent({
    name: 'Index',
    components: {
      barrageArea
    },
    setup(props, context) {
      let state = reactive({
        data: {}
      })
      let tabIndex = ref(0)
      let showForm = ref(false)
      let jmAudio = ref < any | HTMLElement > (null)
      let playIng = ref(false)
      let ageSheet = ref(false)
      let ageList = Array.from(Array(101), (v, k) => String(k))
      ageList.shift()
      let route = useRoute()
      let activityId = ref(route.query.id || null)
      let code = ref(route.query.code || null)
      let token = ref(cookie.get('token') || null)
      let time = ref(0)
      let shareImg = ref('') // null
      let showShare = ref(false)
      let groupList = ref([])
      let selectSubject = ref('')
      let acState = ref(-1)
      let selectGroup = {
        grouponId: null,
        grouponCode: null
      }
      let selectDisabled = ref(false)
      let grouponId = ref(route.query.grouponId || null)
      let grouponCode = ref(route.query.grouponCode || null)
      let curGroupInfo = ref(null)
      let showPopover = ref(true)
      let form: formData = reactive({
        contactName: '',
        contactPhone: '',
        userAge: 5,
        userType: 2,
        subject: '',
        subjectId: '',
        message: ''
      })
      let picture = ref(null)
      let currentPage = ref(0)
      let totalLimit = ref(0)
      let pageLimit = ref(5)
      watch(tabIndex, async () => {
        currentPage.value = 1
        totalLimit.value = 0
        getActGroupList()
      })
      onMounted(async () => {
        // console.log('picture', picture)
        Toast({
          type: 'loading',
          message: '努力加载中...',
          overlay: true,
          forbidClick: true,
          duration: 0
        })
        await handleGetUserInfo() // 拿用户信息
        await handelGetActData()
        getActGroupList()
        // 获取当前团的信息
        await getCurGroupInfo()
        if (acState.value !== 2) {
          addStatistics(activityId.value, 1)
        }
        setShareData()
        Toast.clear()
      })
      const setShareData = (shareData = {}) => {
        const {
          data
        } = state
        var shareText = {
          title: (data as any).title,
          path: window.location.origin + window.location.pathname + `?id=${activityId.value}`,
          desc: (data as any).shareTitle,
          imgUrl: (data as any).homePic
        }
        shareData = Object.assign(shareText, shareData)
        console.log('分享数据--》', shareData)
        setShare(shareData)
      }

      const handleGetUserInfo = async () => {
        if (cookie.get('token')) {
          return
        } else {
          if (code.value) {
            const res = await loginAndRegister(code.value)
            if (res.errno == 0) {
              cookie.set('token', res.data.token, {
                expires: 30
              })
              cookie.set('userinfo', res.data.userInfo, {
                expires: 30
              })
              token.value = res.data.token
            } else {
              var windowLocal = window.location.href
              var index = windowLocal.indexOf("&");
              var localUrl = windowLocal.substring(0, index)

              window.location.href =
                `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx33d4eaf790edb175&redirect_uri=${encodeURIComponent(localUrl)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
            }
          } else {

            window.location.href = wxAuthUrl
          }
        }
      }
      const handelGetActData = async () => {
        const res: any = await getActData(activityId.value)
        if (res.errno == 0) {
          const {
            title,
            endTime,
            startTime
          } = res.data
          state.data = res.data
          document.title = title
          if (res.data.state === 1) {
            time.value = dayjs(endTime).valueOf() - dayjs(new Date()).valueOf()
          } else if (res.data.state === 0) {
            time.value = dayjs(startTime).valueOf() - dayjs(new Date()).valueOf()
          }
          acState.value = res.data.state
          form.subject = res.data.rulesList[0].subject
          form.subjectId = res.data.rulesList[0].id
          selectSubject.value = res.data.rulesList[0]
        } else {
          Toast(res.errmsg || 'system error~')
        }
      }
      const createActCode = async (url = window.location.href) => {
        Toast({
          type: 'loading',
          message: '正在努力生成海报...',
          overlay: true,
          forbidClick: true,
          duration: 0
        })

        const res: any = await createActivityQCode(url || window.location.href, activityId.value, (state
          .data as any).homePic, (state.data as any).posterTitle)
        if (res.errno == 0) {
          shareImg.value = 'data:image/jpeg;base64,' + res.data
          let ua = navigator.userAgent
          let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1
          if (isAndroid) {
            let img = new Image()
            img.src = shareImg.value
            let canvas = picture.value //获取到canvas的DOM
            let ctx = canvas.getContext('2d') //使用2d绘图
            img.onload = () => {
              canvas.width = img.width
              canvas.height = img.height
              ctx.drawImage(img, 0, 0, img.width, img.height)
              let canvasURL = canvas.toDataURL('image/jpeg')
              shareImg.value = canvasURL
            }
          }
        }
        Toast.clear()
        setShareData({
          path: url
        })
      }
      const getActGroupList = async () => {
        const res: any = await getGroupList({
          activityId: activityId.value,
          tag: tabIndex.value + 1,
          page: currentPage.value,
          limit: pageLimit.value
        })
        console.log('团数据', res)
        if (res.errno == 0) {
          groupList.value = res.data.list
          totalLimit.value = res.data.total
        }
      }
      const oepenOrJoinGroup = async () => {
        let parmas = {
          activityId: Number(activityId.value),
          grouponId: selectGroup.grouponId,
          grouponCode: selectGroup.grouponCode,
          ...form
        }
        const res: any = await orderSubmit(parmas)
        if (res.errno == 0) {
          initWxPay()
          const res2: any = await createWXPay(res.data.orderId)
          if (res2.errno == 0) {
            const payStatus = await wxPay(res2.data)
            if (payStatus.err_msg == 'get_brand_wcpay_request:ok') {
              Toast('支付成功')
              setTimeout(() => {
                window.location.reload()
              }, 1500)
            } else {
              Toast('支付失败')
              methods.closeForm()
            }
          } else {
            Toast(res2.errmsg)
          }
        } else {
          Toast(res.errmsg)
        }
      }
      // 获取团的信息
      const getCurGroupInfo = async () => {
        console.log('grouponCode', grouponCode.value)
        if (grouponCode.value) {
          const res: any = await getGroupList({
            activityId: activityId.value,
            grouponCode: grouponCode.value
          })
          if (res.errno == 0 && res.data.limit > 0) {
            curGroupInfo.value = res.data.list[0]
          } else {
            curGroupInfo.value = null
          }
          console.log('查询团的信息', res)
        }
      }

      const methods = {
        handelGetGroupData() {
          getActGroupList()
        },
        calcPrice: (item) => {
          // if (selectDisabled.value) {
          //   return
          // }
          selectSubject.value = item
          form.subjectId = item.id
          form.subject = item.subject
        },
        openForm2(item, disabled) {
          if (disabled) {
            Toast('已经参与过该团或者该团已成团~')
          } else {
            methods.openForm(item)
          }
        },
        openForm(item) {
          if (item) {
            selectGroup.grouponId = item.grouponId
            selectGroup.grouponCode = item.grouponCode
            selectDisabled.value = true
            form.subjectId = item.subjectId
            form.subject = item.subject
            // form.subject = item.subjectId
          } else {
            selectGroup.grouponId = '' // grouponId.value
            selectGroup.grouponCode = '' //grouponCode.value
            selectDisabled.value = false
          }
          showForm.value = true
        },
        closeForm(): void {
          showForm.value = false
          selectGroup = {
            grouponId: null,
            grouponCode: null
          }
          selectDisabled.value = false
        },
        async openGroupShare(item) {
          if (tabIndex.value === 0) {
            methods.openForm(item)
          } else {
            var url =
              `${window.location.origin}${window.location.pathname}?id=${activityId.value}&grouponCode=${item.grouponCode}`
            await createActCode(url)
            showShare.value = true
          }
        },

        async onSubmit() {
          if (form.contactName == '' || form.contactName.length > 8) {
            Toast('请输入正确的学员姓名')
            return
          }
          if (form.userAge <= 0 || form.userAge >= 100) {
            Toast('请选择正确的学员年龄')
            return
          }
          if (!form.subject) {
            Toast('请选择科目')
            return
          }
          if (!(/^1[3456789]\d{9}$/.test(form.contactPhone))) {
            Toast('手机号码有误，请重填')
            return
          }
          Toast({
            type: 'loading',
            message: '提交中...',
            overlay: true,
            forbidClick: true,
            duration: 0
          })
          await oepenOrJoinGroup()
          Toast.clear()
        },
        openRule(): void {
          Dialog.alert({
            title: '活动玩法',
            allowHtml: true,
            messageAlign: 'left',
            // message: '1.打开链接，点击“立即开或者参团”\n\n2.选择科目开团，填写姓名电话\n\n3.提交报名，完成线上支付预定名额\n\n4.点击分享海报，选择分享给好友或者微信群以及朋友圈',
            message: (state.data as any).gameRule ||
              '1.打开链接，点击“立即开或者参团”\n\n2.选择科目开团，填写姓名电话\n\n3.提交报名，完成线上支付预定名额\n\n4.点击分享海报，选择分享给好友或者微信群以及朋友圈'
          })
        },
        openContact(): void {
          Dialog.alert({
            title: '联系机构',
            allowHtml: true,
            messageAlign: 'left',
            message: (state.data as any).contacts.replace(/(\\|\/)n/ig, '</br>') || null
          })
        },
        controlMusic(): void {
          playIng.value = !playIng.value
          if (playIng.value) {
            jmAudio.value.play()
          } else {
            jmAudio.value.pause()
          }
        },
        selectAge(e: number): void {
          form.userAge = ageList[e - 1]
          ageSheet.value = false
        },
        async openShare() {
          await createActCode()
          if (acState.value !== 2) {
            addStatistics(activityId.value, 3)
          }
          showShare.value = true
        },
        closeShare() {
          showShare.value = false
        }
      }
      return {
        ...methods,
        ...toRefs(state),
        curGroupInfo,
        selectDisabled,
        selectSubject,
        tabIndex,
        grouponId,
        grouponCode,
        ageList,
        time,
        acState,
        groupList,
        showShare,
        shareImg,
        form,
        showForm,
        jmAudio,
        playIng,
        ageSheet,
        showPopover,
        picture,
        currentPage,
        totalLimit,
        pageLimit
      }
    }
  });
</script>
<style lang="scss">
  // .van-pagination__item{
  //   color: rgb(255, 183, 49) !important;
  //   &--disabled {
  //    color: #646566 !important;
  //   background-color: #f7f8fa;
  //   cursor: not-allowed;
  //   opacity: .5;
  //   }
  // }
  @keyframes musicRotate {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes heartbeat {
    0% {
      transform: translateX(-50%) scale(0.8, 0.8);
      opacity: 1;
    }

    25% {
      transform: translateX(-50%) scale(1, 1);
      opacity: 0.8;
    }

    100% {
      transform: translateX(-50%) scale(0.8, 0.8);
      opacity: 1;
    }
  }

  .jmact {
    width: 100vw;
    min-height: 100vh;
    /* background: url(); */
    box-sizing: border-box;
    padding-bottom: 90px;
    background-color: #ffb731;

    &-thumb {
      img {
        width: 100%;
        display: block;
        border: none;
      }
    }

    &-cbox {
      color: #666;

      .title {
        /* border-left: 4px solid #1989fa; */
        /* border-bottom: 1px solid #1989fa; */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: 580;
        padding: 5px;
        /* color: #1989fa; */
        $color: #fff;
        color: $color;
        margin: 10px 15px 0;

        &::before,
        &::after {
          width: 6px;
          height: 6px;
          content: "";
          background: $color;
          border-radius: 50%;
          display: block;
          margin: 0 8px;
        }
      }

      .content {
        /* outline: 1px rgb(204, 204, 255) dashed; */
        /* outline-offset:-5px; */
        border-radius: 6px;
        background: #ffffff;
        font-size: 14px;
        padding: 10px;
        margin: 10px 15px 15px;
        line-height: 1.5;
        position: relative;
        color: #313131;
      }

      .thumb {
        img {
          display: block;
          margin: 0 auto;
          width: 100%;
          border: 10px solid hsla(0, 0%, 100%, 0);
          background-clip: padding-box;
        }
      }
    }

    &-content {
      box-sizing: border-box;
      padding: 12px;
      overflow-x: hidden;

      img {
        /* display: none !important; */
        max-width: 100% !important;
      }
    }

    &-footer {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      right: 0;
      background: transparent;
      z-index: 2;
      box-sizing: border-box;
      margin: 0 auto;
      width: 94%;

      /* animation:heartbeat 1s infinite; */
      .curgroup {
        position: absolute;
        right: 14px;
        bottom: 52px;
        padding: 10px;
        width: 50%;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(50, 50, 51, .2);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
        line-height: normal;

        .avatar {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          line-height: normal;
          flex-wrap: wrap;
          font-size: 12px;
        }

        .chief {
          span {
            line-height: normal;
            display: inline-flex;
            background: #f44336;
            box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.12);
            color: #fff;
            font-size: 10px;
            padding: 0 5px;
            border-radius: 10px;
          }

          font-size: 13px;
          color: #313131;
        }

        .tips {
          font-size: 12px;
          color: #313131;
        }

        .jiao {
          position: absolute;
          width: 0;
          height: 0;
          border-color: transparent;
          border-style: solid;
          border-width: 6px;
          color: #fff;
          /* top: 0; */
          border-bottom-width: 0;
          border-top-color: currentColor;
          transform: translate(-50%, -100%);
          right: 16px;
          bottom: -11px;
        }
      }

      /* bottom: 0; */
      /* padding: 14px 10px 20px; */
      /* width: 100%; */
      /* box-sizing: border-box; */
      /* background: rgba(0, 0, 0, .3); */
    }

    &-form {
      transform: translate(-50%, -50%);
      border-radius: 5px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 80%;
      /* height: 60vh; */
      background: #fafafa;
      margin: 0 auto;

      .item {
        margin-bottom: 5px;
      }

      &__tit {
        margin: 0;
        padding: 18px 10px 16px;
        color: rgba(69, 90, 100, 0.6);
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
      }

      &__tips {
        font-size: 12px;
        padding: 0 16px;
        line-height: 1.2;
        color: #ff976a;
        margin-top: 10px;
      }

      &__pay {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        img {
          width: 30px;
        }

        color: #ee0a24;
        font-size: 18px;
        font-weight: block;
      }

      &__paybtn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px;

        span {
          font-size: 12px;
        }
      }
    }

    &-swiper {
      width: 100%;
      height: auto;

      img {
        width: 100%;
        display: block;
      }
    }

    &-topside {
      position: absolute;
      right: 14px;
      top: 8%;
      z-index: 2;

      &__item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        border-radius: 50%;
        font-size: 12px;
        margin-bottom: 10px;

        img {
          max-width: 100%;
          height: auto;

          &.ing {
            animation: musicRotate 3.5s linear infinite;
          }
        }
      }
    }

    &-acttime {
      /* background: rgba(0, 0, 0, .1); */
      $bgColor: #ffb731;

      color: #fff;
      $textColor: #ffffff;
      background: rgba(0, 0, 0, .1);

      .box {
        /* background: #a3761f; */
        width: 100%;
        height: 100%;
        padding: 8px 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .colon {
        display: inline-block;
        margin: 0 3px;
        color: $textColor;
        font-size: 14px;
      }

      .block {
        display: inline-block;
        width: 22px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #ffb731;
        border-radius: 2px;
      }
    }

    &-actinfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      font-size: 14px;
      background: rgba(0, 0, 0, .1);
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    &-grouplist {
      .title {
        padding: 5px 0px 0 0;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        color: #ee0a24;
      }

      margin: 15px;
      /* background: #ff976a; */
      background: #efefef;
      padding: 12px;
      border-radius: 5px;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dotted #eee;
        background-color: #fafafa;
        padding: 10px;
        position: relative;

        .tag {
          line-height: normal;
          display: inline-flex;
          background: rgb(244, 67, 54);
          box-shadow: 1px 2px 4px rgba(0, 0, 0, .12);
          color: #fff;
          font-size: 10px;
          padding: 0 5px;
          border-radius: 10px;
          position: absolute;
          top: 10px;
        }

        .desc {
          min-height: 50px;
          font-size: 13px;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          color: #313131;
          flex: 1;
          margin-left: 10px;

          &_top {
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            font-weight: 500;
          }

          &_center {
            margin-bottom: 4px;
            font-size: 13px;
          }

          .avatarlist {
            display: flex;
            justify-content: left;
            margin: 5px 0;
          }

          .avatar {
            /* border: 1px solid #eee; */
            margin-right: -10px;
            box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
            border-radius: 50%;

            .van-image {
              display: block;
            }
          }

          &_done {
            width: 50px;
            height: 50px;
            background: url(../assets/done.png) no-repeat center/contain;
            position: absolute;
            top: 50%;
            right: 10px;
            border: none;
            transform: translateY(-50%);
          }
        }
      }

      .empty {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: normal;
        font-size: 15px;
        color: #999;
        padding: 18px;
        background-color: #fafafa;

        img {
          width: 20px;
          margin-right: 5px;
        }
      }
    }

    &-botside {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 65px;
      height: 65px;
      background: rgba(0, 0, 0, .8);
      color: #fff;
      /* border-radius: 50%; */
      font-size: 26px;
      position: fixed;
      bottom: 22%;
      right: 14px;
      border-radius: 6px;
      flex-direction: column;

      /* animation:heartbeat 1s infinite; */
      p {
        font-size: 14px;
        text-align: center;
        margin-top: 5px;
      }

    }

    .sharebox {

      padding: 20px;
      background: hsl(330deg 100% 100%);

      p {
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
        line-height: 1.2;
      }
    }
  }
</style>